<template>
  <view class="container">
    <custom-navbar :immersive="true" color="#333"> </custom-navbar>
    <view :style="{ paddingTop: `${navbarHeight}px` }"></view>
    <view>
      <view class="container_card" v-for="(item, index) in list" :key="index" @click="handleTriggerSelect(index)">
        <view class="container_card_info">
          <image src="/static/image/citizen_icon.png" mode="widthFix" />
          <view style="margin-left: 10rpx">
            <view class="container_card_info_title">临海市民卡</view>
            <view class="container_card_info_tip">
              <text>{{item.cardTypeDesc}}</text> 
              <text class="container_card_info_tip_red" v-if="item.cardType&&item.cardType==='260'">（惠民卡享社发配送购物8.8折）</text>
            </view>
          </view>
        </view>

        <view class="container_card_id">
          <view v-for="(_item, _index) in dotList" :key="_index" class="container_card_id_dot"></view>
          <view style="width: 20rpx"></view>
          <view v-for="(_item, _index) in dotList" :key="_index" class="container_card_id_dot"></view>
          <view style="width: 20rpx"></view>
          <view v-for="(_item, _index) in dotList" :key="_index" class="container_card_id_dot"></view>
          <view style="width: 20rpx"></view>
          <view>{{ cardMask(item.cardNo) }}</view>
        </view>
        <view class="checkbox" :class="item.selected ? 'selected' : ''">
          <uni-icons class="selected-icon" v-if="item.selected" type="checkmarkempty" size="28rpx" color="white"></uni-icons>
        </view>
      </view>

      <view class="container_bottom">
        <button @click="submit">确认选择</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getToken, getUserInfo, clearToken, clearUserInfo } from '@/service/auth.js'
import { citizenList, bindCitizen } from '@/service/api/citizen.js'
import navbarMixin from '@/mxins/navbar.js'
import { maskBankCard } from '@/utils/func.js'

export default {
  mixins: [navbarMixin],
  components: {},
  data() {
    return {
      user: {},
      list: [],
      dotList: [{}, {}, {}, {}],
    }
  },
  onLoad() {
    const data = getUserInfo()
    this.user = JSON.parse(data)
    //获取市民卡信息
    this.getList()
  },
  onShow() {
    const app = getApp()
  },
  created() {},

  methods: {
    cardMask(cardNo) {
      return maskBankCard(cardNo)
    },
    getList() {
      this.uniShowLoading()
      citizenList()
        .then(res => {
          console.log('res', res)
          this.uniHideLoading()
          this.list = res.data.content.map(item => {
            return { ...item, selected: false }
          })
        })
        .catch(err => {
          this.uniHideLoading()
          this.uniShowToast(err.msg)
          
        })
    },
    async submit() {
      //绑定市民卡
      const item = this.list.find(item => item.selected)
      if (!item) {
        return this.uniShowToast('请选择市民卡')
      }
      this.uniShowLoading()
      const res = await bindCitizen({ cardNo: item.cardNo }).catch(err => {
        if (err.status !== 200) {
          this.uniHideLoading()
          uni.showModal({ title: '提示', content: err.msg })
        }
      })
      this.uniHideLoading()
      console.log('res', res)
      if (res && res.status === 200) {
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('acceptDataFromOpenedPage', {
          data: '',
        })
        uni.navigateBack({
          delta: 1,
        })
      }
    },
    handleTriggerSelect(index) {
      console
      const item = this.list[index]
      if (item.selected) {
        return
      }
      const oldSelectItem = this.list.find(_item => _item.selected)
      if (oldSelectItem) {
        oldSelectItem.selected = false
      }

      item.selected = true
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 28rpx;
  background: linear-gradient(to bottom, #edfff1 10%, #f6f6f6 48%);
  &_card {
    background-image: url(/static/image/citizen_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 20rpx;
    color: white;
    position: relative;
    &_info {
      display: flex;
      align-items: center;
      image {
        width: 70rpx;
      }
      &_title {
        font-weight: bold;
        font-size: 32rox;
      }
      &_tip {
        font-size: 26rpx;
        &_red{
          color: red;
        }
      }
    }

    &_id {
      font-size: 36rpx;
      margin-top: 20rpx;
      letter-spacing: 2rpx;
      display: flex;
      align-items: center;
      &_dot {
        width: 8rpx;
        height: 8rpx;
        background-color: white;
        border-radius: 50%;
        margin-right: 15rpx;
      }
    }
    .checkbox {
      position: absolute;
      right: 0;
      top: 20rpx;
      display: flex;
      justify-items: center;
      align-items: center;
      width: 40rpx;
      height: 40rpx;
      background-color: white;
      border: 2rpx solid #d9d9d9;
      border-radius: 50%;
      margin: 0 24rpx 0 8rpx;

      &.selected {
        border: 2rpx solid transparent;
        background-color: #26bb55;
        color: white;
        .selected-icon {
          margin: 2rpx;
          color: #fff !important;
        }
      }
    }
  }

  &_bottom {
    position: fixed;
    bottom: 100rpx;
    left: 20rpx;
    right: 20rpx;
    button {
      background: linear-gradient(to right, #77e399, #26bb55);
      color: white;
    }
  }
}
</style>
